<template>
    <div>
        <h1>father组件 路由入门</h1>
        <router-view/>
       <div class="container p-5">
        <button type="button" class="btn btn-success col mx-3 my-5"><router-link class="text-white" to="login" style="text-decoration:none;">to login 组件</router-link></button>
        <button type="button" class="btn btn-success col"><router-link class="text-white" to="Home" style="text-decoration:none;">to home 组件</router-link></button>
       </div>
    </div>
</template>

<script setup>
/**
 * 路由：router 执行组件之间的导航（加载指定的组件）
 * 根据导航的url地址，加载指定的组件
 * 跳转页面
 * 由于 vue 工程结构属性 单页面
 * 单页不能进行真正的页面跳转，只能通过dom节点更换，模拟完成页面跳转
 * 
 * 下载路由模块
 * npm i vue-router
 * */ 

// import login from "./login.vue";

</script>

<style lang="css" scoped>

</style>